<template>
	<el-row class="ordereDetail">
		<div class="div1">
			<div class="div1-1">
				<p class="div1-1-p1"><i class="el-icon-s-data"></i>后台订单管理</p>
			</div>
		</div>

		<hr>

		<el-row class="div2">
			<el-form ref="form" :model="form" label-width="80px">
				<!-- <el-form-item> -->
				<el-select v-model="form.region" placeholder="请选择">
					<el-option label="超级管理员" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
				<!-- </el-form-item> -->
			</el-form>

			<el-form ref="form" :model="form" label-width="80px">
				<!-- <el-form-item> -->
				<el-select v-model="form.region" placeholder="请选择">
					<el-option label="超级管理员" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
				<!-- </el-form-item> -->
			</el-form>

			<el-form ref="form" :model="form" label-width="80px">
				<!-- <el-form-item> -->
				<el-select v-model="form.region" placeholder="请选择">
					<el-option label="超级管理员" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
				<!-- </el-form-item> -->
			</el-form>

			<el-button type="submit" class="btn1">
				<!-- <i class="el-icon-search"></i> -->
				<img src="../../../../assets/img/mobile/searchs.png" />
			</el-button>
		</el-row>

		<el-row class="div3">
			<el-input v-model="input" placeholder="注册-账号"></el-input>
			<el-input v-model="input" placeholder="注册-手机号"></el-input>
			<el-input v-model="input" placeholder="注册-姓名"></el-input>
		</el-row>

		<el-table :data="tableData" border style="margin-top: 10px;margin-bottom: 5px;" >
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand">
						<el-form-item>
							<el-button style="background-color: lightgrey; margin-left: 50px; color: white;">发货</el-button>
						</el-form-item>
						
						<el-form-item style="margin-left: 60px;">
							<!-- 图片 -->
						<!-- 		<template slot-scope="scope">
									<div>
										<img v-bind:src="`${$imgurl}/api/public/showimg/${scope.row}`"
											style="height: 60px; width: 60px;" />
									</div>
								</template> -->
								图片
						</el-form-item>
						
						
						<el-row class="div4">
							<el-form-item style="display: flex;">
							<span>账号:111</span>
							<span>电话:111</span>
							<span>下单:111</span>
						</el-form-item>
						
						<el-form-item style="display: flex;">
							<span>名称:111</span>
							<span>数量:111</span>
							<span>单价:111</span>
						</el-form-item>
						</el-row>
						
						
					</el-form>
				</template>
			</el-table-column>
			<el-table-column label="订单号" prop="id">
			</el-table-column>
			<el-table-column label="收货人" prop="name">
			</el-table-column>
			<el-table-column label="收货地址" prop="desc">
			</el-table-column>
			<el-table-column label="电话" prop="desc">
			</el-table-column>
			<el-table-column label="发货单号" prop="desc">
			</el-table-column>
			<el-table-column label="下单时间" prop="desc">
			</el-table-column>
			<el-table-column label="总价" prop="desc">
			</el-table-column>
			<el-table-column label="付款" prop="desc">
			</el-table-column>
			<el-table-column label="收货" prop="desc">
			</el-table-column>
		</el-table>
		<el-button class="btn">显示更多</el-button>
	</el-row>
</template>

<script>
	export default {
		name: 'OrderDetail',
		data() {
			return {
				tableData: [{
					id: '12987122',
					name: '好滋好味鸡蛋仔',
					category: '江浙小吃、小吃零食',
					desc: '荷兰优质淡奶，奶香浓而不腻',
					address: '上海市普陀区真北路',
					shop: '王小虎夫妻店',
					shopId: '10333'
				}],
				input: '',
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
			}
		}
	}
</script>

<style scoped>
	.ordereDetail {
		margin-left: 20px;
		width: 100%;
		height: 600px;
		line-height: 50px;
	}

	.div1 {
		margin-top: 18px;
		display: flex;
		justify-content: space-between;
		margin-bottom: -9px;
	}

	.div1-1 {
		display: flex;
	}

	.div1-1-p1 {
		font-size: 18px;
	}

	.div1 .addhotpic {
		width: 300px;
		color: white;
		background-color: #87ceeb;
	}

	.div1 button {
		background-color: #189F92;
		border: none;
		width: 55px;
		height: 38px;
		margin-top: 7px;
		border-radius: 2px;
	}

	/* 刷新图标 */
	.el-icon-refresh-right {
		color: white;
		font-size: 22px;
	}

	.ordereDetail hr {
		border: 1px gainsboro solid;
	}


	.div2 {
		display: flex;
	}

	.div2 .el-form {
		margin: 0 10px;
	}


	.div2 .btn1 {
		background-color: #1DC6B5;
		border: none;
		width: 50px;
		height: 38px;
		border-radius: 3px;
		margin-left: 8px;
		margin-top: 7px;
	}

	.div2 .btn1 img {
		width: 22.5px;
		margin-top: -5px;
		margin-left: -5px;
	}

	.div3 {
		display: flex;
	}

	.div3 .el-input {
		margin: 0 8px;
		width: 220px;
	}
	.div4{
		
		width: 500px;
		margin-left: 250px;
		margin-top: -85px;
	}
	.div4 .el-form-item span{
		margin: 0 20px;
	}
	
	.btn{
		background-color: #1DC6B5;
		color: white;
		width: 200px;
		margin: 0 40%;
	}
</style>